<template>
    <div>
        <div class="plbox_header">
            <u class="big_title" :style="{ background: '#' + item?.id.slice(0, 6) }">{{ item?.name.slice(0,
                1).toLocaleUpperCase()
            }}</u>{{ item?.name }}
        </div>
        <p> {{ item?.content }}</p>
        <div>
            {{ item?.userAgent }} {{ Math.abs(dayjs().diff(dayjs(item?.createAt), 'hour')) }}个小时前
            <i style="cursor: pointer;" @click="() => { ploneShow = !ploneShow }"> <comment-outlined /> 评论</i>
            <div v-show="ploneShow">
                <Comment @handelemits="handelemits"></Comment>
            </div>
        </div>
        <div v-if="item?.children">
            <a-card v-for="val in item?.children" :key="val.id">
                <component :is="CommentTwo" :item="val"></component> <!-- <CommentTwo :item="item"></CommentTwo> -->
            </a-card>
        </div>
    </div>
</template>
<script setup lang="ts">
import dayjs from "dayjs"
import { ref, defineProps } from "vue"
import { CommentOutlined } from '@ant-design/icons-vue';
import CommentTwo from "../components/commentTwo.vue"
import Comment from "../components/comment.vue"
import {useDefault} from "../store/default"
import {useArchDetail} from "../store/archdetail"
import {storeToRefs} from "pinia"

let defaults = useDefault()
let archdetail = useArchDetail()
let { users } = storeToRefs(defaults)
let ploneShow = ref(false)
const { item } = defineProps({
    item: Object,
    default:{}
})
let handelemits = (val: any) => {
    console.log(item, "item")
    let obj = {
        content: val,
        email: users.value.email,
        hostId: item?.hostId,
        name: users.value.user,
        parentCommentId: item?.id,
        replyUserEmail: item?.email,
        replyUserName: item?.name,
        url: item?.url
    }
    archdetail.editcomment(obj)
    setTimeout(()=>{
        location.reload()
    },1000)
}
</script>
<style lang="scss"></style>